<template>

  <div >
     <!-- <router-view/> -->
		<!-- <navbar title="车辆信息" :disabled='false'></navbar> -->
		<div class="con" style="position:relative;top:46px;">
      <noticebar 
      title="【通知】 智保客测试系统！" 
      icon='http://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'>
      
      </noticebar>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" style="    width: 100%;" />
      </van-swipe-item>
    </van-swipe>
    <!-- <img src="../assets/u65.png" alt=""> -->
			<van-cell-group>
        <!-- title="投保地区"  is-link @click="showPop"/ -->
			
				 <van-field
						v-model="licenseNo"
          
						label="车牌号"
						type="textarea"
						placeholder="请输入车牌号"
						rows="1"
						autosize
            @change="haveSpace"
					/>
        	<van-cell @click="showPop" is-link>
          <template slot="title">
							<span class="van-cell-text">投保地区</span>
							<!-- <van-switch v-model="checked" size="20px" class="swich"/> -->
              <span class="van-cell-text" style="position:absolute; left :105px; ">{{msg}}</span>
						</template>
        </van-cell>
					<van-cell>
						<template slot="title">
							<span class="van-cell-text">是否为过户车</span>
							<van-switch v-model="checked" @change="chwOwn" size="20px" class="swich"/>
						</template>
					</van-cell>
			</van-cell-group>
      <div v-show="xingshi">
        <div style="padding:0.2rem ; color:#aaa; ">行驶证信息:</div>
       <van-cell-group>

                <!-- <van-field
                    v-model="licenseNo"
                    label="车牌号"
                    type="textarea"
                    placeholder="请输入车牌号"
                    rows="1"
                    autosize
                /> -->
                <van-field
                    v-model="frameNo"
                    label="车架号"
                    type="textarea"
                    placeholder="请输入车架号"
                    rows="1"
                    autosize
                />
                <van-field
                    v-model="engineNo"
                    label="发动机号"
                    type="textarea"
                    placeholder="请输入发动机号"
                    rows="1"
                    autosize
                />
                <van-cell is-link @click="showPop2">
                    <template slot="title">
                        <span class="van-cell-text">初登日期</span>
                        <!-- <van-switch v-model="checked" size="20px" class="swich"/> -->
                        <span class="van-cell-text" style="position:absolute; left :105px; ">{{firstRegisterDate}}</span>
                    </template>
                </van-cell>
        </van-cell-group>
        
      </div>

        <div class="btnCon"> 
          <van-button size="large" type="default" @click="toDrLi">立即投保</van-button>
        </div>
		
    	<van-popup v-model="show" position="bottom" :overlay="true" class="pop">
        <van-area  :area-list="areaList" :value="diqu" columns-num="2" title="选择地区" @cancel="closeA" @confirm='confirmA' />
        <!-- @cancel="closeA" @confirm='confirmA' -->
      </van-popup>

     <van-popup v-model="show2" position="bottom" :overlay="true" class="pop">
        <van-datetime-picker
            v-model="currentDate"
            type="date"
            :max-date='new Date()'
            @cancel="closeB"
             @confirm='confirmB'
            />
      </van-popup> 
		</div>

  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import noticebar from "../components/noticebar.vue";
import axios from "axios";
import Vue from "vue";
import { Toast } from "vant";
import { Lazyload } from "vant";

// options 为可选参数，无则不传
Vue.use(Lazyload);
Vue.use(Toast);
export default {
  components: { navbar, noticebar },
  data() {
    return {
      t_active: 0,
      msg: "",
      diqu: "110100",
      show: false,
      show2: false,
      checked: false,
      licenseNo: "",
      images: ["./static/images/u65.png", "./static/images/u66.png"],
      areaList: {
        province_list: {
          "110000": "北京市",
          "130000": "河北省",
          "150000": "内蒙古自治区",
          "320000": "江苏省",
          "330000": "浙江省",
          "370000": "山东省",
          "410000": "河南省",
          "320000": "江苏省"
        },
        city_list: {
          "110100": "北京市",
          "130900": "	沧州",
          "130600": "	保定",
          "131000": "	廊坊",
          "130500": "	邢台",
          "131100": "	衡水",
          "130700": "	张家口",
          "130400": "	邯郸",
          "130800": "	承德",
          "130300": "	秦皇岛",
          "130200": "	唐山",
          "130100": "	石家庄",
          "152500": "	锡林郭勒盟",
          "150200": "	包头",
          "152200": "	兴安盟",
          "150600": "	鄂尔多斯",
          "150400": "	赤峰",
          "152900": "	阿拉善盟",
          "150300": "	乌海",
          "150500": "	通辽",
          "150900": "	乌兰察布盟",
          "150700": "	呼伦贝尔盟",
          "150100": "	呼和浩特",
          "150800": "	巴彦淖尔盟",
          "321300": "	宿迁",
          "320500": "	苏州",
          "320100": "	南京",
          "320700": "	连云港",
          "320281": "	江阴",
          "320800": "	淮安",
          "320400": "	常州",
          "320600": "	南通",
          "321100": "	镇江",
          "321000": "	扬州",
          "320900": "	盐城",
          "320300": "	徐州",
          "320200": "	无锡",
          "321200": "	泰州",
          "330100": "	杭州",
          "330700": "	金华",
          "330400": "	嘉兴",
          "330500": "	湖州",
          "331100": "	丽水",
          "331000": "	台州",
          "330300": "	温州",
          "330200": "	宁波",
          "330600": "	绍兴",
          "330900": "	舟山",
          "330800": "	衢州",
          "371200": "	莱芜",
          "371600": "	滨州",
          "371400": "	德州",
          "370500": "	东营",
          "371700": "	菏泽",
          "370100": "	济南",
          "370800": "	济宁",
          "371500": "	聊城",
          "371300": "	临沂",
          "370200": "	青岛",
          "371100": "	日照",
          "370900": "	泰安",
          "371000": "	威海",
          "370700": "	潍坊",
          "370600": "	烟台",
          "370400": "	枣庄",
          "370300": "	淄博",
          "410100": "	郑州",
          "320400": "	常州",
          "320281": "	江阴",
          "320100": "	南京",
          "320600": "	南通",
          "321200": "	泰州",
          "320200": "	无锡",
          "320900": "	盐城",
          "321100": "	镇江"
        }
      },
      clpp: "",
      xingshi: false,
      frameNo: "",
      engineNo: "",
      firstRegisterDate: "",
      currentDate: new Date(),
      chgOwnerFlag:'N',
    };
  },
  filters: {
    fitSpace(val){
      var val = val.replace(/\s/g, "")
      return val
    }
  },
  //  watch:{
  //       licenseNo(val, oldVal){//普通的watch监听
  //           console.log("a: "+val, oldVal);
  //           console.log(this.strlen(val))
  //           if(this.strlen(val)>= 8){
  //             this.xingshi = true
  //             this.toDrLi()
  //           }
  //       },
  //  },
  methods: {
    chwOwn(){
      console.log(this.checked)
      if(this.checked ==false){
        this.chgOwnerFlag = 'N'
      }else{
        this.chgOwnerFlag = 'Y'
      }
      console.log(this.chgOwnerFlag)
    },
    haveSpace: function() {
    //  console.log(this.licenseNo.replace(/\s/g, ""))
      this.licenseNo = this.licenseNo.replace(/<\/?.+?>/g,""); 
      this.licenseNo = this.licenseNo.replace(/[\r\n]/g, ""); 
     this.licenseNo = this.licenseNo.replace(/\s+/g, "");
      this.licenseNo = this.licenseNo.toUpperCase()
    },
    strlen: function(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    showPop: function() {
      if (this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    showPop2: function() {
      if (this.show2) {
        this.show2 = false;
      } else {
        this.show2 = true;
      }
    },
    closeA: function() {
      this.show = false;
    },
    confirmA: function(data) {
      console.log(data);
      // this.diqu = ;
      this.show = false;
      this.msg = data[0].name + data[1].name;
      this.diqu = data[1].code;
    },
    toDrLi: function() {
      if (this.licenseNo == "") {
        Toast("请输入车牌号");
      } else {
        this
          .post({
              "licenseNo": this.licenseNo,
              "merchantName": "taishan",
              "functionName": "VehicleType"
            },
             "api/services/app/car/VehicleType"
             
          )
          .then(res => {
            console.log(res.data);
            console.log(res.data.status);
            // return;
            if(res.data.success == true){
              // console.log("dsadsa")

              
              var data = res.data.result.carVehicle;
              if(data != null){
                   console.log(data)
                // return
                this.engineNo = data.engineNo;
                this.firstRegisterDate = data.firstRegisterDate;
                this.frameNo = data.frameNo;
                this.clpp = data.clpp;

                this.$router.push({
                  name: "DrivingLicense",
                  query: {
                    clpp: this.clpp,
                    // clpp:'奥迪FV7203BADBG轿车',
                    Address: this.msg,
                    cityCode: this.diqu,
                    licenseNo: this.licenseNo,
                    frameNo: this.frameNo,
                    engineNo: this.engineNo,
                    licenseDate: this.firstRegisterDate,
                    chgOwnerFlag:this.chgOwnerFlag
                  }
                });
              }else{
                 this.$router.push({
                  name: "DrivingLicense",
                  query: {
                    clpp: this.clpp,
                    // clpp:'奥迪FV7203BADBG轿车',
                    Address: this.msg,
                    cityCode: this.diqu,
                    licenseNo: this.licenseNo,
                    frameNo: this.frameNo,
                    engineNo: this.engineNo,
                    licenseDate: this.firstRegisterDate,
                    chgOwnerFlag:this.chgOwnerFlag
                  }
                });
              }
             
            }else{
              Toast('请求超时，请稍后再试');
            }
          });
      }
    },
    tocar: function() {
      //  frameNo:'',
      // engineNo:'',
      // firstRegisterDate:'',
      this.toDrLi();

      // if(this.frameNo == ''|| this.engineNo==''||this.firstRegisterDate == ''||this.msg == ''){
      //    Toast('请补全信息');
      //    return
      // }
      console.log(this.diqu);
      console.log(this.frameNo);
      console.log(this.engineNo);
      console.log(this.firstRegisterDate);
      return;
    },
    closeB: function() {
      this.show2 = false;
    },
    confirmB: function(data) {
      //   console.log(data);
      //   console.log(this.formatDate(data))
      //   // this.diqu = ;
      this.show2 = false;
      this.firstRegisterDate = this.formatDate(data);
    },

    formatDate: function(time) {
      var date = new Date(time);

      var year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      var newTime =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day);

      return newTime;
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  width: 10rem;
  // margin-top: 50px;
  .swich {
    position: absolute;
    top: 0.27rem;
    right: 0.4rem;
  }
  .btnCon {
    width: 6rem;
    margin: 1rem auto;
  }
  .pop {
    width: 10rem;
  }
}
</style>
